<template>
	<view class="illnessList-wrap" v-if="inquiry">
		<!-- 头部 -->
	<!-- 	<view class="category-title">
			<view class="category-left ">自己查</view>
			<view class="category-right">你来说,医生帮你查</view>
		</view> -->
		<view class="category-wrapper">
			<!-- 左边导航 -->
			<scroll-view show-scrollbar="false" class=" left-wrapper" scroll-y>
				<view class="left-content">
					<view class="title-content" :class="selectKs === item.code ? 'onSelected' : ''" v-for="(item, index) in ksList" :key="index" @click="chooseClass(item.code)">
						{{ item.departmentName }}病症
					</view>
				</view>
			</scroll-view>

			<!-- 右边内容 -->
			<scroll-view show-scrollbar="false" class="right-wrapper" scroll-y>
				<view class="right-content">
					<view class="product-wrapper">
						<view class="category-item" id="list">
							<o-divider textColor="#806cff" lineColor="#806cff" v-if="zsList.length > 0">中医病症</o-divider>
							<view class="category-item-box">
								<view
									class="category-item-info"
									v-for="(item, index) in zsList"
									:key="index"
									@click="gotoRouter('/pages-client/hospital/illnessInfo?id=' + item.id)"
								>
									{{ item.sicknessName }}
								</view>
							</view>

							<o-divider textColor="#806cff" lineColor="#806cff" v-if="xsList.length > 0">西医病症</o-divider>
							<view class="category-item-box">
								<view
									class="category-item-info"
									v-for="(item, index) in xsList"
									:key="index"
									@click="gotoRouter('/pages-client/hospital/illnessInfo?id=' + item.id)"
								>
									{{ item.sicknessName }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
const app = getApp();

export default {
	data() {
		return {
			zsList: [], //中医疾病列表
			xsList: [], //西医疾病列表
			ksList: [], //科室列表
			selectKs: '10030' //选择的科室
		};
	},
	onLoad(option) {
		this.queryDepartmentList();
		this.querySicknessList('0');
		this.querySicknessList('1');
	},
	onShow() {},
	methods: {
		//分类选择
		chooseClass(code) {
			if (this.selectKs === code) {
				return;
			}
			this.selectKs = code;
			this.querySicknessList('0');
			this.querySicknessList('1');
		},

		//科室列表
		queryDepartmentList() {
			this.$api.queryDepartmentList({}).then(res => {
				if (res.code == 200) {
					this.ksList = this.ksList.concat(res.result);
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			});
		},

		//病症列表
		querySicknessList(type) {
			this.$api
				.querySicknessList({
					params: {
						sicknessType: type,
						sicknessDepartmentCode: this.selectKs
					}
				})
				.then(res => {
					if (res.code == 200) {
						if (type == '0') {
							this.zsList = res.result.records;
						} else {
							this.xsList = res.result.records;
						}
					}
				});
		},

		//数据滚动
		goodsScroll() {}
	}
};
</script>

<style lang="less">
.illnessList-wrap {
	width: 100vw;
	height: 100vh;

	.category-title {
		height: 5vh;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.category-left {
			width: 260rpx;
			text-align: center;
			color: #806cff;
		}
		.category-right {
			flex: 1;
			text-align: center;
			color: #806cff;
		}
	}

	.category-wrapper {
		display: flex;
		flex-direction: row;
		position: relative;
		z-index: 190;
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			display: none;
			color: transparent;
		}

		.left-wrapper {
			height: 95vh;
			width: 260rpx;
			flex: 0 0 260rpx;
			background-color: #f8f8f8;
			box-sizing: border-box;
			&::-webkit-scrollbar {
				display: none;
			}
			.left-content {
				margin-bottom: 110rpx;
				.title-content {
					width: 100%;
					height: 96rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
					&:last-child {
						border-bottom: 0;
					}

					&.onSelected {
						background: #fff;
						position: relative;
						color: #806cff;
					}
				}
			}
		}

		.right-wrapper {
			height: 95vh;
			flex: 1;
			background-color: #fff;
			.right-content {
				width: 100%;
				box-sizing: border-box;
				.right-screen {
					position: sticky;
					top: 0;
					z-index: 120;
					display: flex;
					// width: 588rpx;
					height: 96rpx;
					align-items: center;
					justify-content: flex-end;
					background: #ffffff;
					padding-right: 30rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #f7f7f7;
					.right-screen-sort {
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
					}
					.right-screen-price {
						display: flex;
						align-items: center;
						margin-left: 30rpx;
						.screen-price-font {
							font-size: 24rpx;
							font-weight: 500;
							color: #999999;
							margin-right: 16rpx;
						}
						.screen-price-icon {
							padding-top: 10rpx;
							> image {
								display: block;
								width: 13rpx;
								height: 8rpx;
								margin-bottom: 6rpx;
							}
						}
					}
					> image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 30rpx;
					}
					.screen-active {
						color: #587bde !important;
					}
				}

				.product-wrapper {
					.category-item {
						padding-bottom: 40rpx;

						.category-item-box {
							display: flex;
							flex-wrap: wrap;
							// justify-content: space-around;
							.category-item-info {
								width: 150rpx;
								height: 56rpx;
								margin: 0 44rpx 36rpx; 
								font-size: 24rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								border: 1rpx solid #c7c9ce;
							}
						}

						
					}
				}
			}
		}
	}
}
</style>
